<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 15:35:39
-->
<template>
   <!-- <div class="page-warp">
   车辆页面
  </div> -->
  <div class="contents" @click.stop="otherclick">
    <div class="mapwrap">
      <ItemWrap
        v-if="showData"
        :style="{ left: offsetX, top: offsetY }"
        style="height: 305px; width: 420px"
        class="dialog"
        :title="mapTitle"
        @click.native.stop="isMapClick = false"
      >
        <div class="close" @click.stop="showData = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <MapData />
      </ItemWrap>
    </div>
    <div class="content_left">
      <div class="pagetab"></div>
      <div class="content_left-one">
        <ItemWord
          class="content_lr-item"
          title="市场交易额"
          style="height: 280px"
        >
          <LeftLeftTop @chartClick="chartClick" />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="批发市场规模"
          style="height: 280px"
        >
          <LeftLeftCenter />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="商城发展指数"
          style="height: 280px"
        >
          <LeftLeftBottom />
        </ItemWord>
      </div>
      <div class="content_left-two">
        <ItemWord
          class="content_lr-item"
          title="物流总额"
          style="height: 280px"
        >
          <LeftCenterTop />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="物流资源规模"
          style="height: 280px"
        >
          <LeftCenterCenter />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="物流园区活跃度"
          style="height: 280px"
        >
          <LeftCenterBottom />
        </ItemWord>
      </div>
      <div class="content_left-three">
        <ItemWord
          class="content_lr-item"
          title="网络零售额"
          style="height: 280px"
        >
          <LeftRightTop />
        </ItemWord>
        <ItemWord class="content_lr-item" title="快递" style="height: 280px">
          <LeftRightCenter />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="线路活跃度"
          style="height: 280px"
        >
          <LeftRightBottom />
        </ItemWord>
      </div>
    </div>
    <div class="content_center">
      <CenterTopStatic class="content_center_top" />
    </div>
    <div class="content_right">
      <div class="content_right-three">
        <ItemWord
          class="content_lr-item"
          title="运输货量规模"
          style="height: 280px"
        >
          <RightLeftTop />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="运输时效"
          style="height: 280px"
        >
          <RightLeftCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="保险" style="height: 280px">
          <RightLeftBottom />
        </ItemWord>
      </div>
      <div class="content_right-two">
        <ItemWord
          class="content_lr-item"
          title="货物品类占比"
          style="height: 280px"
        >
          <RightCenterTop />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="仓储资源"
          style="height: 280px"
        >
          <RightCenterCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="金融" style="height: 280px">
          <RightCenterBottom />
        </ItemWord>
      </div>
      <div class="content_right-one">
        <ItemWord
          class="content_lr-item"
          title="运输成本"
          style="height: 280px"
        >
          <RightRightTop />
        </ItemWord>
        <ItemWord
          class="content_lr-item"
          title="园区智能化"
          style="height: 280px"
        >
          <RightRightCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="加油站" style="height: 280px">
          <RightRightBottom />
        </ItemWord>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CarMain',
  data() {
    return {
      cursor: '<!-- 自定义内容 -->',
    };
  },
};
</script>

<style lang="scss" scoped>
.page-warp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  // border: 1px solid red;

  background: url('../../assets/img/bg4.png') no-repeat center;
  background-position: center center;
  background-size: 100% 100%;
}
</style>
